import {FC, memo, useState} from "react";
import {compareObject} from "../../utils/utils";
import styles from './PageHeader.module.scss'
import {Image, ScrollView, View, Text} from "@tarojs/components";

interface Props {
  title: string;
  filterArray?: any[];
  filterCurrent?: any;
  filterShow?: boolean;
  onFilterItemClick?: any;
  stylePosition?: 'fixed' | 'absolute',
  fontSize?: number,
}

/**
 * 高度190px
 * @param props
 * @constructor
 */
const PageHeader: FC<Props> = (props) => {
  const {title, filterArray, filterCurrent, filterShow, onFilterItemClick, stylePosition, fontSize = 25} = props

  const [_filterShow, setFilterShow] = useState(filterShow)
  const [_filterCurrent, setFilterCurrent] = useState(filterCurrent)

  function onFilterClick() {
    setFilterShow(!_filterShow)
  }

  function onPageHeaderFilterItemClick(item) {
    onFilterItemClick(item)
    setFilterCurrent(item)
  }

  return (
    <View>
      <View className={styles.page_theme_bg_view} style={{position: stylePosition || 'fixed'}}/>
      <View className={styles.page_title_view} style={{position: stylePosition || 'fixed'}}>
        <Text style={{fontSize: fontSize, maxWidth: 250, fontWeight: "bold"}}>{title}</Text>
        {filterArray && filterArray.length > 0 &&
        <View className={styles.filter_view}>
          <View className={styles.filter_title} onClick={onFilterClick}>{_filterCurrent.name || filterCurrent.name}
            {_filterShow ?
              (<View>
                  <Text className="iconfont icon-shang"
                        style={{fontSize: 11, marginLeft: 2, marginTop: 1.5}}/>
                  <View/>
                  <ScrollView scroll-y="true" className={styles.filter_item_wrap}>
                    {filterArray && filterArray.map((item, index) => {
                      return <View className={styles.filter_item} style={{borderTop: "1px #ffffff solid"}} key={index}
                                   onClick={() => onPageHeaderFilterItemClick(item)}>
                        {item.name}
                      </View>
                    })}
                  </ScrollView>
                </View>
              ) :
              <Text className="iconfont icon-xia"
                    style={{fontSize: 11, marginLeft: 2, marginTop: 1.5}}/>
            }
          </View>
        </View>}

      </View>
    </View>
  )
}

export default memo(PageHeader, (oldProps, newProps) => {
  return compareObject(oldProps, newProps);
});
